<template>
	<view class="container">
		<view class="user-box">
			<view class="index-top">
				<view :style="{ height: statusBarHeight + 'px' }"></view>
				<view class="f-center top-title white">个人中心</view>
			</view>
			<view class="user-info flex">
				<view class="avatar-box f-center" @click="isLogin">
					<open-data
						v-if="!hasLogin"
						type="userAvatarUrl"
						style="width: 140rpx; height: 140rpx"
					></open-data>
					<image
						v-else
						:src="userInfo.userHeadPortrait"
						style="width: 140rpx; height: 140rpx"
					></image>
				</view>
				<view
					class="flex f-column f-justifyC ml20"
					style="height: 140rpx"
					@click="isLogin"
				>
					<open-data
						v-if="!hasLogin"
						type="userNickName"
						class="font32 white"
					></open-data>
					<view class="flex f-align" v-else>
						<text
							class="font32 white mr10"
							style="max-width: 300rpx; line-height: 40rpx"
							>{{ userInfo.userName }}</text
						>
						<image
							v-if="userInfo.isMember == '会员'"
							src="../static/img/hjkhj@2x.png"
							style="width: 40rpx; height: 32rpx"
						></image>
						<image
							v-else
							src="../static/img/sfdsdf.png"
							style="width: 40rpx; height: 32rpx"
						></image>
					</view>
					<text class="font28 white mt20">{{ userInfo.userPhone }}</text>
				</view>
				<view
					class="cika-box f-center"
					@click="$api.toPage('./numCard', 1, this)"
				>
					<image
						src="../static/img/fsdfrfsdffdsdsgdf.png"
						style="width: 46rpx; height: 39rpx"
					></image>
					<text class="font28 ml10" style="color: #d7c076">次卡</text>
				</view>
			</view>
		</view>
		<view
			v-if="userInfo.isMember == '会员'"
			class="vip-box flex f-justifyB f-align"
			@click="$api.toPage('./myVIP', 1, this)"
		>
			<view class="flex f-align">
				<image src="../static/img/dfgdfgdgdfgd@2x.png" class="img"></image>
				<view class="flex f-column">
					<text class="font28 bold" style="color: #ffddbd"
						>您好！尊贵的VIP会员</text
					>
					<text class="font22 mt10" style="color: rgba(255, 221, 189, 0.7)"
						>当前余额：￥{{ userInfo.remainingSum }}</text
					>
				</view>
			</view>
			<view class="flex">
				<view class="btn f-center font24 mr10">充值</view>
			</view>
		</view>
		<view
			v-else
			class="vip-box flex f-justifyB f-align"
			@click="$api.toPage('./myVIP', 1, this)"
		>
			<view class="flex f-align">
				<image src="../static/img/fdsfdsrgdfgdfvdf.png" class="img"></image>
				<view class="flex f-column">
					<text class="font28 bold" style="color: #ffddbd">VIP高级会员</text>
					<text class="font22 mt10" style="color: rgba(255, 221, 189, 0.7)"
						>开通即可享有会员优惠特权</text
					>
				</view>
			</view>
			<view class="btn f-center font24">充值</view>
		</view>

		<view class="order-box flex f-column">
			<view class="flex f-align f-justifyB title-box">
				<text class="font32 bold">我的订单</text>
				<view
					class="flex f-align"
					@click="$api.toPage('./orderList?orderState=已预约&tabs=0', 1, this)"
				>
					<text class="font24 gray777">查看全部订单</text>
					<text class="zlicon icon-right font26 gray999 ml20"></text>
				</view>
			</view>
			<view class="flex f-align f-justifyB font24 gray333 status-box">
				<view
					class="flex f-column f-align box-item"
					@click="$api.toPage('./orderList?orderState=已预约&tabs=0', 1, this)"
				>
					<image src="../static/img/wdyuyue@2x.png" mode=""></image>
					<text>已预约</text>
					<view class="red-circle" v-if="yuyue > 0">{{ yuyue }}</view>
				</view>
				<view
					class="flex f-column f-align box-item"
					@click="$api.toPage('./orderList?orderState=服务中&tabs=1', 1, this)"
				>
					<image src="../static/img/wdfuwu@2x.png" mode=""></image>
					<text>服务中</text>
					<view class="red-circle" v-if="fuwu > 0">{{ fuwu }}</view>
				</view>
				<view
					class="flex f-column f-align box-item"
					@click="$api.toPage('./orderList?orderState=待取件&tabs=2', 1, this)"
				>
					<image src="../static/img/wdqujian@2x.png" mode=""></image>
					<text>待取件</text>
					<view class="red-circle" v-if="daiqu > 0">{{ daiqu }}</view>
				</view>
				<view
					class="flex f-column f-align box-item"
					@click="
						$api.toPage('./orderList?orderState=交易完成&tabs=3', 1, this)
					"
				>
					<image src="../static/img/wdjiaoyi@2x.png" mode=""></image>
					<text>交易完成</text>
				</view>
			</view>
		</view>

		<view class="list-item" @click="$api.toPage('./cardList?tabs=2', 1, this)">
			<view class="flex f-align">
				<image src="../static/img/wdkabao@2x.png" mode=""></image>
				<text class="font32 gray333 ml30">卡包</text>
			</view>
			<text class="zlicon icon-right font30 gray999"></text>
		</view>
		<view class="list-item" @click="userAddress()">
			<view class="flex f-align">
				<image src="../static/img/shouyudibiao@2x.png" mode=""></image>
				<text class="font32 gray333 ml30">收货地址</text>
			</view>
			<text class="zlicon icon-right font30 gray999"></text>
		</view>
		<view class="list-item" @click="$api.toPage('./xfList', 1, this)">
			<view class="flex f-align">
				<image src="../static/img/xf.png" mode=""></image>
				<text class="font32 gray333 ml30">消费明细</text>
			</view>
			<text class="zlicon icon-right font30 gray999"></text>
		</view>
		<view class="list-item" @click="$refs.kefu.open()">
			<view class="flex f-align">
				<image src="../static/img/wdkefu@2x.png" mode=""></image>
				<text class="font32 gray333 ml30">联系客服</text>
			</view>
			<text class="zlicon icon-right font30 gray999"></text>
		</view>
		<view class="list-item" @click="$api.toPage('./userHelp', 1, this)">
			<view class="flex f-align">
				<image src="../static/img/wdbangzhu@2x.png" mode=""></image>
				<text class="font32 gray333 ml30">使用帮助</text>
			</view>
			<text class="zlicon icon-right font30 gray999"></text>
		</view>
		<!-- <view class="list-item" @click="loginHandle('校园入口')" v-if="type == '校园'">
			<view class="flex f-align">
				<image src="../static/img/wdxiaoyuan@2x.png" mode=""></image>
				<text class="font32 gray333 ml30">校园入口</text>
			</view>
			<text class="zlicon icon-right font30 gray999"></text>
		</view> -->
		<view class="list-item" @click="loginHandle('配送入口')">
			<view class="flex f-align">
				<image src="../static/img/wdpeisong@2x.png" mode=""></image>
				<text class="font32 gray333 ml30">配送入口</text>
			</view>
			<text class="zlicon icon-right font30 gray999"></text>
		</view>
		<view class="list-item" @click="loginHandle('工厂入口')">
			<view class="flex f-align">
				<image src="../static/img/wdgongc@2x.png" mode=""></image>
				<text class="font32 gray333 ml30">工厂入口</text>
			</view>
			<text class="zlicon icon-right font30 gray999"></text>
		</view>
		<view class="list-item">
			<view class="flex f-align">
				<image src="../static/img/version.png" mode=""></image>
				<text class="font32 gray333 ml30">系统版本</text>
			</view>
			<text class="font30 gray999">V{{ version }}</text>
		</view>

		<!-- 授权登录 -->
		<auth ref="auth"></auth>
		<!-- 客服电话 -->
		<kefu ref="kefu"></kefu>
	</view>
</template>

<script>
import { mapState } from 'vuex'
import auth from '../components/auth.vue'
import kefu from '../components/kefu.vue'
import { version } from '@/utils/API.js'
export default {
	data() {
		return {
			statusBarHeight: getApp().globalData.statusBarHeight,
			yuyue: 0,
			fuwu: 0,
			daiqu: 0,
			type: '',
			version
		}
	},
	onShow() {
		if (this.hasLogin) {
			this.type = uni.getStorageSync('type')
			this.getOrderNum()
		}
	},
	components: {
		auth,
		kefu
	},
	computed: {
		...mapState(['hasLogin', 'userInfo'])
	},
	onHide() {
		this.$refs.auth.close()
	},
	onShareAppMessage(e) {},
	methods: {
		isLogin() {
			if (!this.hasLogin) {
				this.$refs.auth.open()
				return
			}
		},
		getOrderNum() {
			this.$http
				.ajax({
					url: '/Order/select',
					params: {
						userId: uni.getStorageSync('userInfo').id
					}
				})
				.then((res) => {
					if (res.code == 200) {
						this.yuyue = res.yuyue
						this.fuwu = res.fuwu
						this.daiqu = res.daiqu
					}
				})
		},
		loginHandle(title) {
			if (!this.hasLogin) {
				this.$refs.auth.open()
				return
			}
			uni.setStorage({
				key: 'pageTitle',
				data: title,
				success: () => {
					this.$api.toPage('./roleLogin')
				}
			})
		},
		userAddress() {
			if (!this.hasLogin) {
				this.$refs.auth.open()
				return
			}
			this.$api.toPage('../pages_address/userAddress')
		}
	}
}
</script>

<style scoped lang="scss">
.user-box {
	background-image: url();
	background-size: 100% 100%;

	.index-top {
		width: 750rpx;

		.top-title {
			height: 88rpx;
			padding: 0 20rpx;
			font-size: 26rpx;
		}
	}
}

.user-info {
	width: 750rpx;
	height: 320rpx;
	padding-left: 40rpx;
	padding-top: 56rpx;

	.avatar-box {
		width: 140rpx;
		height: 140rpx;
		border-radius: 50%;
		overflow: hidden;
	}

	.cika-box {
		position: absolute;
		top: 260rpx;
		right: 0;
		z-index: 99;
		width: 182rpx;
		height: 75rpx;
		background: #4181ff;
		border: 1rpx solid #ffffff;
		box-shadow: 0rpx 2rpx 23rpx 0rpx rgba(26, 63, 135, 0.4);
		border-radius: 38rpx 0 0 38rpx;
		padding-left: 30rpx;
		border-right-width: 0;
	}
}

.vip-box {
	background-image: url();
	background-size: 100% 100%;
	width: 686rpx;
	height: 163rpx;
	border-radius: 22rpx;
	position: absolute;
	top: 420rpx;
	left: 34rpx;
	z-index: 99;
	padding: 36rpx 40rpx 23rpx 28rpx;

	.img {
		width: 90rpx;
		height: 104rpx;
		margin-right: 24rpx;
	}

	.btn {
		width: 137rpx;
		height: 48rpx;
		border: 1rpx solid #ffddbd;
		border-radius: 22rpx;
		color: #ffddbd;
	}
}

.order-box {
	width: 750rpx;
	background: #ffffff;
	padding: 0 32rpx;
	margin-top: 110rpx;
	margin-bottom: 30rpx;

	.title-box {
		height: 80rpx;
	}

	.status-box {
		padding: 0 50rpx;
		height: 160rpx;

		image {
			width: 40rpx;
			height: 44rpx;
			margin-bottom: 20rpx;
		}

		.box-item {
			position: relative;

			.red-circle {
				width: 30rpx;
				height: 30rpx;
				border-radius: 50%;
				position: absolute;
				right: 0;
				top: -14rpx;
				z-index: 99;
				text-align: center;
				font-size: 16rpx;
				line-height: 30rpx;
				color: #ffffff;
				background-color: #4082ff;
			}
		}
	}
}

.list-item {
	width: 750rpx;
	height: 90rpx;
	background-color: #ffffff;
	padding: 0 32rpx 0 40rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;

	image {
		width: 38rpx;
		height: 38rpx;
	}

	&::after {
		position: absolute;
		bottom: 0;
		left: 102rpx;
		content: '';
		width: 616rpx;
		height: 2rpx;
		background-color: #e5e5e5;
	}

	&:last-child::after {
		background-color: #ffffff;
	}

	.contact-btn {
		font-size: 32rpx;
		color: #333333;
		width: 600rpx;
		text-align: left;
		background-color: #ffffff;

		&::after {
			border: none;
		}
	}
}

.container {
	padding: 0;
}

.ml30 {
	margin-left: 30rpx;
}
</style>
